<template>
  <div class="visitor-container">
    <!-- 地图容器 -->
    <div ref="visitorMapView" class="visitor-map-view"></div>

    <!-- 智能规划悬浮按钮 -->
    <div class="plan-button" @click="showPlanningPanel = true">
      <el-icon>
        <LocationInformation />
      </el-icon>
      <span>智能规划</span>
    </div>

    <!-- 景点信息区域 -->
    <el-drawer v-model="showAttractionInfo" direction="rtl" size="360px" :with-header="false" class="custom-drawer">
      <div v-if="currentAttraction" class="attraction-detail">
        <div class="attraction-header">
          <h2>{{ currentAttraction.SpotName }}</h2>
          <el-button v-if="!selectedAttractions.includes(currentAttraction.OBJECTID)" type="primary" size="small"
            @click="addToRoute(currentAttraction as Attraction)">
            <el-icon>
              <Plus />
            </el-icon> 添加到行程
          </el-button>
          <el-button v-else type="danger" size="small" @click="removeFromRoute(currentAttraction.OBJECTID)">
            <el-icon>
              <Delete />
            </el-icon> 移除
          </el-button>
        </div>
        <!-- 添加景点类型标签 -->
        <div class="attraction-type">
          <el-tag :type="getTypeTagType(currentAttraction.SpotType)" effect="light">
            {{ getTypeLabel(currentAttraction.SpotType || '') }}
          </el-tag>
        </div>

        <div v-if="currentAttraction.IntroduceImageBase64" class="attraction-image">
          <img :src="currentAttraction.IntroduceImageBase64" alt="景点图片" />
        </div>

        <div class="attraction-intro">
          <h3>景点介绍</h3>
          <p>{{ currentAttraction.SpotIntroduction || '暂无介绍信息' }}</p>
        </div>
      </div>
    </el-drawer>

    <!-- 智能规划面板 -->
    <el-drawer v-model="showPlanningPanel" direction="rtl" size="400px" :with-header="false" class="custom-drawer">
      <div class="planning-panel">
        <div class="drawer-header">
          <h2>智能行程规划</h2>
        </div>

        <!-- 偏好设置 -->
        <div class="preference-section">
          <h3>游览偏好设置</h3>
          <el-form :model="preferences" label-position="top">
            <el-form-item label="计划游览时间">
              <el-slider v-model="preferences.visitDuration" :min="1" :max="8" :step="0.5" show-input
                :format-tooltip="formatHours" />
            </el-form-item>
            <el-form-item label="最多景点数量">
              <el-slider v-model="preferences.maxAttractions" :min="2" :max="10" :step="1" show-input />
            </el-form-item>
            <el-form-item label="景点类型偏好">
              <el-checkbox-group v-model="preferences.spotTypes">
                <el-checkbox label="historical">历史文化</el-checkbox>
                <el-checkbox label="natural">自然风光</el-checkbox>
                <el-checkbox label="entertainment">休闲娱乐</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="generateRecommendation" :loading="isGenerating" class="full-width-btn">
            智能推荐路线
          </el-button>
        </div>

        <!-- 已选景点列表 -->
        <div class="selected-spots-section" v-if="selectedAttractions.length > 0">
          <h3>
            已选景点 <span class="count-badge">{{ selectedAttractions.length }}</span>
          </h3>
          <el-scrollbar height="200px">
            <el-timeline>
              <el-timeline-item v-for="(id, index) in selectedAttractions" :key="id"
                :timestamp="getAttractionById(id)?.SpotName" :type="index === 0 ? 'primary' : ''">
                <div class="timeline-spot-item">
                  <el-button type="danger" circle size="small" @click="removeFromRoute(id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                  <el-button v-if="index !== 0" type="primary" circle size="small" @click="moveUp(index)">
                    <el-icon>
                      <ArrowUp />
                    </el-icon>
                  </el-button>
                  <el-button v-if="index !== selectedAttractions.length - 1" type="primary" circle size="small"
                    @click="moveDown(index)">
                    <el-icon>
                      <ArrowDown />
                    </el-icon>
                  </el-button>
                </div>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>

          <div class="route-planning-actions">
            <el-button type="success" @click="calculateRoute" :loading="isCalculating"
              :disabled="selectedAttractions.length < 2" class="full-width-btn">
              开始规划路线
            </el-button>
            <el-button type="danger" @click="clearRoute" class="full-width-btn">
              清空行程
            </el-button>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 路线详情卡片 -->
    <div class="route-card" v-if="showRouteDetails">
      <div class="route-header">
        <h3>最佳游览路线</h3>
        <el-button class="close-btn" type="info" circle size="small" @click="showRouteDetails = false">
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>

      <div class="route-summary">
        <div class="summary-item">
          <el-icon>
            <Pointer />
          </el-icon>
          <span>{{ selectedAttractions.length }}个景点</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Position />
          </el-icon>
          <span>{{ (totalDistance / 1000).toFixed(1) }}km</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Timer />
          </el-icon>
          <span>约{{ Math.ceil(totalTime / 60) }}分钟</span>
        </div>
      </div>

      <el-collapse accordion>
        <el-collapse-item v-for="(step, index) in routeInstructions" :key="index" :title="`第${index + 1}段路线`">
          <div class="step-info">
            <div class="step-title">{{ step.start }} → {{ step.end }}</div>
            <div class="step-detail">
              <span>{{ (step.distance / 1000).toFixed(1) }}km</span>
              <span>·</span>
              <span>{{ Math.ceil(step.time / 60) }}分钟</span>
            </div>
            <el-button type="text" @click="showStepDetails(step)"> 查看详细指引 </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div class="card-actions">
        <el-button type="primary" size="small" @click="startNavigation" :disabled="isNavigating">
          开始导航
        </el-button>
        <el-button type="danger" size="small" @click="clearRoute"> 清空路线 </el-button>
      </div>
    </div>

    <!-- 导航提示 -->
    <div class="navigation-hint" v-if="isNavigating">
      <div class="hint-content">
        <div class="current-instruction">{{ currentNavigationStep }}</div>
        <div class="next-step" v-if="nextNavigationStep">
          <span>下一步:</span>
          <span>{{ nextNavigationStep }}</span>
        </div>
      </div>
      <el-progress :percentage="navigationProgress" :stroke-width="8" :format="progressFormat"></el-progress>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, h } from 'vue'
import {
  LocationInformation,
  Plus,
  Delete,
  ArrowUp,
  ArrowDown,
  Pointer,
  Position,
  Timer,
  Close,
} from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { getGaoDeRoute } from '@/utils/gaodeAPI'

// 新增景点类型定义
interface Attraction {
  OBJECTID: number
  SpotName: string
  SpotIntroduction?: string
  SpotType?: string
  IntroduceImageBase64?: string
  geometry?: __esri.Geometry
  // 其他可能的字段根据实际接口添加
}
interface RouteInstruction {
  start: string // 起始点名称
  end: string // 终点名称
  distance: number // 路段距离（米）
  time: number // 预计时间（秒）
  instructions: string[] // 分段导航指令
}

// 地图和视图
let map: __esri.Map
let view: __esri.MapView
const visitorMapView = ref<HTMLDivElement>()

// 景点数据
const attractions = ref<Attraction[]>([])
let attractionsLayer: __esri.FeatureLayer | null = null
const currentAttraction = ref<Attraction | null>(null)
const showAttractionInfo = ref(false)

// 路线规划
const showPlanningPanel = ref(false)
const selectedAttractions = ref<number[]>([])
const isGenerating = ref(false)
const isCalculating = ref(false)
const routeGraphics: __esri.Graphic[] = []

// 用户偏好设置
const preferences = reactive({
  visitDuration: 4, // 小时
  maxAttractions: 5, // 最大景点数
  spotTypes: ['historical', 'natural', 'entertainment'], // 景点类型偏好
})

// 路线详情
const showRouteDetails = ref(false)
const routeInstructions = ref<RouteInstruction[]>([])
const totalDistance = ref(0)
const totalTime = ref(0)

// 导航状态
const isNavigating = ref(false)
const currentNavigationStep = ref('')
const nextNavigationStep = ref('')
const navigationProgress = ref(0)
const currentStepIndex = ref(0)

// 地图初始化
onMounted(async () => {
  await initMap()
  await loadAttractions()
})

// 初始化地图
async function initMap() {
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  // 创建景点图层
  attractionsLayer = new FeatureLayer({
    url: 'https://services5.arcgis.com/HfcuJ9RUSlysODB4/arcgis/rest/services/ScenicPoint/FeatureServer/0',
    outFields: ['*'],
    popupEnabled: false,
    renderer: {
      type: "unique-value",
      field: "SpotType",
      defaultSymbol: {
        type: "simple-marker",
        size: 16,
        color: [156, 156, 156, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 2
        }
      },
      uniqueValueInfos: [
        {
          value: "historical",
          symbol: {
            type: "simple-marker",
            style: "square",
            size: 16,
            color: [230, 97, 97, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        },
        {
          value: "natural",
          symbol: {
            type: "simple-marker",
            style: "circle",
            size: 16,
            color: [75, 166, 127, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        },
        {
          value: "entertainment",
          symbol: {
            type: "simple-marker",
            style: "diamond",
            size: 16,
            color: [95, 150, 224, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        }
      ]
    },
    // 添加标注
    labelingInfo: [{
      symbol: {
        type: "text",
        color: "#333333",
        haloColor: "#ffffff",
        haloSize: 2,
        font: {
          size: 12,
          weight: "normal"
        }
      },
      labelPlacement: "above-center",
      labelExpressionInfo: {
        expression: "$feature.SpotName"
      },
      minScale: 5000,
      maxScale: 0
    }]
  })

  map.add(attractionsLayer)

  // 创建地图视图
  view = new MapView({
    container: visitorMapView.value!,
    map: map,
    center: [117.025711, 36.6752],
    zoom: 15,
  })

  // 点击事件
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]
    // 检查是否点击了景点
    const feature = hitResults.find((result) => result.layer?.id === attractionsLayer?.id)?.graphic

    if (feature) {
      currentAttraction.value = feature.attributes
      showAttractionInfo.value = true
    }
  })
}

// 获取类型标签的样式
const getTypeTagType = (type: string = '') => {
  switch (type) {
    case 'historical':
      return 'danger'
    case 'natural':
      return 'success'
    case 'entertainment':
      return 'primary'
    default:
      return 'info'
  }
}

// 获取类型标签的文本（复用之前的方法）
const getTypeLabel = (value: string) => {
  switch (value) {
    case 'historical':
      return '历史文化'
    case 'natural':
      return '自然风光'
    case 'entertainment':
      return '休闲娱乐'
    default:
      return value || '未分类'
  }
}


// 加载景点数据
async function loadAttractions() {
  try {
    const query = attractionsLayer!.createQuery()
    query.where = '1=1'
    query.outFields = ['*']

    const results = await attractionsLayer!.queryFeatures(query)
    attractions.value = results.features.map((f) => f.attributes)

    ElMessage.success(`已加载${attractions.value.length}个景点`)
  } catch (error) {
    console.error('加载景点失败', error)
    ElMessage.error('加载景点数据失败')
  }
}

// 根据ID获取景点
function getAttractionById(id: number) {
  return attractions.value.find((a) => a.OBJECTID === id)
}

// 添加景点到路线
function addToRoute(attraction: Attraction) {
  if (!selectedAttractions.value.includes(attraction.OBJECTID)) {
    selectedAttractions.value.push(attraction.OBJECTID)
    ElMessage.success(`已将 ${attraction.SpotName} 添加到行程`)
  }
}

// 从路线移除景点
function removeFromRoute(id: number) {
  const index = selectedAttractions.value.indexOf(id)
  if (index > -1) {
    const name = getAttractionById(id)?.SpotName
    selectedAttractions.value.splice(index, 1)
    ElMessage.info(`已将 ${name} 从行程中移除`)
  }
}

// 上移景点顺序
function moveUp(index: number) {
  if (index > 0) {
    const temp = selectedAttractions.value[index]
    selectedAttractions.value[index] = selectedAttractions.value[index - 1]
    selectedAttractions.value[index - 1] = temp
  }
}

// 下移景点顺序
function moveDown(index: number) {
  if (index < selectedAttractions.value.length - 1) {
    const temp = selectedAttractions.value[index]
    selectedAttractions.value[index] = selectedAttractions.value[index + 1]
    selectedAttractions.value[index + 1] = temp
  }
}

// 智能推荐路线
function generateRecommendation() {
  isGenerating.value = true

  // 清空当前选择
  selectedAttractions.value = []

  setTimeout(() => {
    // 根据偏好过滤景点
    let filteredAttractions = [...attractions.value]

    // 根据景点类型偏好过滤
    if (preferences.spotTypes.length > 0) {
      filteredAttractions = filteredAttractions.filter((attraction) => {
        // 这里根据实际数据结构调整类型判断逻辑
        const type = attraction.SpotType || ''
        return preferences.spotTypes.some((prefType) => {
          if (prefType === 'historical') return /历史|文化|古/.test(type)
          if (prefType === 'natural') return /自然|风景|公园|湖/.test(type)
          if (prefType === 'entertainment') return /娱乐|休闲|购物/.test(type)
          return false
        })
      })
    }

    // 如果过滤后没有景点，使用全部景点
    if (filteredAttractions.length === 0) {
      filteredAttractions = [...attractions.value]
    }

    // 按照流行度排序（假设有流行度字段，没有则随机排序）
    filteredAttractions.sort(() => Math.random() - 0.5)

    // 选择不超过最大景点数量的景点
    const maxSpots = Math.min(preferences.maxAttractions, filteredAttractions.length)

    // 添加到路线
    for (let i = 0; i < maxSpots; i++) {
      selectedAttractions.value.push(filteredAttractions[i].OBJECTID)
    }

    isGenerating.value = false

    ElMessage.success(`已为您智能推荐${selectedAttractions.value.length}个景点`)
  }, 1000)
}

function showStepDetails(step: RouteInstruction) {
  ElMessageBox({
    title: `${step.start} → ${step.end} 详细指引`,
    message: h('div', null, [
      h(
        'div',
        { class: 'step-stat' },
        `全程 ${(step.distance / 1000).toFixed(1)}公里 / 约${Math.ceil(step.time / 60)}分钟`,
      ),
      h('el-scrollbar', { maxHeight: '400px' }, [
        h(
          'ul',
          { class: 'step-instructions' },
          step.instructions.map((text, i) =>
            h('li', { key: i, class: 'instruction-item' }, [
              h('span', { class: 'step-index' }, `${i + 1}. `),
              text.replace(/<[^>]+>/g, ''), // 移除HTML标签
            ]),
          ),
        ),
      ]),
    ]),
    confirmButtonText: '关闭',
  })
}

// 计算路线
async function calculateRoute() {
  if (selectedAttractions.value.length < 2) {
    ElMessage.warning('请至少选择两个景点')
    return
  }

  isCalculating.value = true

  // 清除之前的路线
  clearGraphics()

  // 获取所有景点坐标
  const points: __esri.Point[] = []
  for (const id of selectedAttractions.value) {
    const attraction = getAttractionById(id)
    if (attraction) {
      // 查询景点的几何信息
      const query = attractionsLayer!.createQuery()
      query.where = `OBJECTID = ${id}`
      query.returnGeometry = true

      const result = await attractionsLayer!.queryFeatures(query)
      if (result.features.length > 0) {
        points.push(result.features[0].geometry as __esri.Point)
      }
    }
  }

  if (points.length < 2) {
    ElMessage.error('无法获取足够的景点位置信息')
    isCalculating.value = false
    return
  }

  // 绘制景点标记
  points.forEach((point, index) => {
    const symbol = new SimpleMarkerSymbol({
      color:
        index === 0 ? [0, 122, 194] : index === points.length - 1 ? [255, 0, 0] : [255, 165, 0],
      size: 12,
      outline: {
        color: [255, 255, 255],
        width: 2,
      },
    })

    const graphic = new Graphic({
      geometry: point,
      symbol: symbol,
    })

    view.graphics.add(graphic)
    routeGraphics.push(graphic)
  })

  // 计算路线
  routeInstructions.value = []
  totalDistance.value = 0
  totalTime.value = 0

  try {
    // 分段计算路线
    for (let i = 0; i < points.length - 1; i++) {
      const start = points[i]
      const end = points[i + 1]

      // 调用高德路径规划API
      const routeResult = await getGaoDeRoute(
        `${start.longitude},${start.latitude}`,
        `${end.longitude},${end.latitude}`,
      )

      // 绘制路线
      if (routeResult && routeResult.route && routeResult.route.paths[0]) {
        const path = routeResult.route.paths[0]
        console.log(path)
        // 将路径点转换为二维数组
        const pathPoints = path.steps.flatMap((step) => {
          return step.polyline.split(';').map((point) => {
            const [lng, lat] = point.split(',').map(Number)
            return [lng, lat]
          })
        })
        console.log(pathPoints)
        // 创建路线图形
        const routeLine = new Graphic({
          geometry: new Polyline({
            paths: [pathPoints],
          }),
          symbol: new SimpleLineSymbol({
            color: [0, 122, 194, 0.8],
            width: 4,
          }),
        })

        view.graphics.add(routeLine)
        routeGraphics.push(routeLine)

        // 添加路线指引
        const startName =
          getAttractionById(selectedAttractions.value[i])?.SpotName || `景点${i + 1}`
        const endName =
          getAttractionById(selectedAttractions.value[i + 1])?.SpotName || `景点${i + 2}`

        // 提取路线指引信息
        const instructions = path.steps.map((step) => step.instruction)

        routeInstructions.value.push({
          start: startName,
          end: endName,
          distance: Number(path.distance),
          time: Number(path.duration),
          instructions: instructions,
        })

        // 累计总距离和时间
        totalDistance.value += Number(path.distance)
        totalTime.value += Number(path.duration)
      }
    }

    // 显示路线详情
    showRouteDetails.value = true
    ElMessage.success('路线规划成功')
  } catch (error) {
    console.error('路线规划失败', error)
    ElMessage.error('路线规划失败')
  } finally {
    isCalculating.value = false
  }
}

// 清除地图上的图形
function clearGraphics() {
  view.graphics.removeAll()
  routeGraphics.length = 0
}

// 清空路线
function clearRoute() {
  clearGraphics()
  selectedAttractions.value = []
  routeInstructions.value = []
  showRouteDetails.value = false
  isNavigating.value = false
}

// 开始导航
function startNavigation() {
  if (routeInstructions.value.length === 0) {
    ElMessage.warning('请先规划路线')
    return
  }

  isNavigating.value = true
  currentStepIndex.value = 0
  updateNavigationInfo()

  ElNotification({
    title: '导航已开始',
    message: '请按照指引前往目的地',
    type: 'success',
    duration: 3000,
  })
}

// 更新导航信息
function updateNavigationInfo() {
  // 获取当前路段的第一个指令
  if (routeInstructions.value.length > 0) {
    const currentSection = routeInstructions.value[0]
    const allInstructions = currentSection.instructions

    if (allInstructions.length > 0) {
      currentNavigationStep.value = allInstructions[currentStepIndex.value]

      if (currentStepIndex.value < allInstructions.length - 1) {
        nextNavigationStep.value = allInstructions[currentStepIndex.value + 1]
      } else {
        nextNavigationStep.value = '到达目的地'
      }

      // 更新进度
      navigationProgress.value = (currentStepIndex.value / allInstructions.length) * 100
    }
  }

  // 模拟导航进度，实际应基于位置更新
  simulateNavigation()
}

// 模拟导航进度
function simulateNavigation() {
  if (!isNavigating.value) return

  setTimeout(() => {
    if (routeInstructions.value.length > 0) {
      const currentSection = routeInstructions.value[0]
      const allInstructions = currentSection.instructions

      if (currentStepIndex.value < allInstructions.length - 1) {
        currentStepIndex.value++
        updateNavigationInfo()
      } else {
        // 完成第一段导航，移除第一段
        if (routeInstructions.value.length > 1) {
          routeInstructions.value.shift()
          currentStepIndex.value = 0
          updateNavigationInfo()
        } else {
          // 全部导航完成
          completeNavigation()
        }
      }
    }
  }, 8000) // 每8秒更新一次导航状态
}

// 完成导航
function completeNavigation() {
  isNavigating.value = false
  ElNotification({
    title: '导航完成',
    message: '您已到达最终目的地',
    type: 'success',
  })
}

// 停止导航
function stopNavigation() {
  isNavigating.value = false
  ElMessage.info('导航已结束')
}

// 格式化时间显示
function formatHours(val: number) {
  return `${val}小时`
}

// 格式化进度条显示
function progressFormat(percentage: number) {
  return Math.round(percentage) + '%'
}
</script>

<style scoped>
.visitor-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.visitor-map-view {
  width: 100%;
  height: 100%;
}

/* 智能规划按钮 */
.plan-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.plan-button:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* 抽屉样式 */
.custom-drawer :deep(.el-drawer__body) {
  padding: 0;
  overflow-y: auto;
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

/* 景点详情 */
.attraction-detail {
  padding: 0 20px 20px;
}

.attraction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.attraction-image {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.attraction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attraction-intro {
  margin-bottom: 20px;
}

.attraction-intro p {
  line-height: 1.6;
  color: #606266;
}

.attraction-facilities h3,
.attraction-intro h3 {
  font-size: 16px;
  margin-bottom: 12px;
  position: relative;
  padding-left: 12px;
}

.attraction-facilities h3::before,
.attraction-intro h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #409eff;
  border-radius: 2px;
}

/* 设施列表 */
.facility-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facility-item {
  padding: 12px;
  border-radius: 6px;
  background-color: #f5f7fa;
}

.facility-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.facility-address {
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

.loading-facilities,
.empty-facilities {
  padding: 20px 0;
}

/* 规划面板 */
.planning-panel {
  padding-bottom: 20px;
}

.preference-section {
  padding: 0 20px 20px;
  border-bottom: 1px solid #ebeef5;
}

.preference-section h3,
.selected-spots-section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.count-badge {
  margin-left: 8px;
  background-color: #409eff;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.selected-spots-section {
  padding: 20px;
}

.timeline-spot-item {
  display: flex;
  gap: 8px;
}

.route-planning-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.full-width-btn {
  width: 100%;
}


/* 导航提示框 */
.navigation-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 500px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.hint-content {
  margin-bottom: 12px;
}

.current-instruction {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.next-step {
  font-size: 14px;
  color: #606266;
}

.route-card {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.close-btn {
  align-self: flex-start;
}

.route-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
}

.step-info {
  padding: 8px;
}

.step-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.step-detail {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 8px;
}

.card-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.el-button+.el-button {
  margin-left: 0px;
}
.attraction-type {
  margin: 0 0 15px;
  display: flex;
  gap: 8px;
}

.attraction-type .el-tag {
  font-size: 14px;
  padding: 4px 12px;
}
</style>
